<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <!-- 基本选择器 -->
    <style>
        /* 1.通配符选择器（*）：选择匹配所有元素 */
        *{
            margin: 0;
            padding: 0;
        }


        /* 2.元素选择器（E）：通过标签名来选择元素 */
        h1{
            color:lightblue;
        }

        /* 3.类选择器（.classname）：通过class的属性值来选择元素 */
        .s{
            font-weight: 800;
        }
        .s1{
            color: blue;
        }
        .s2{
            color: red;
        }

        /* 4.id选择器（#id）：具备唯一性，#通过id属性值选择元素 */
        #d1{
            width: 200px;
            height: 200px;
            background-color: orangered;
        }

        #d2{
            width: 200px;
            height: 300px;
            /* 圆角 */
            border-radius: 10%;
            /* 边框：宽度 样式 颜色 */
            border: 3px solid green;
        }

        /* 5.属性选择器：标签名[class="xx"] */
        span[class="s s2"]{
            color: blue;
        }

        /* 6.群组选择器（s1,s2,s3）：将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开 */
        /* h1,.s2,#d2{
            background-color: blue;
        } */


        /* 7.后代选择器（E 空格F）：选择E元素下所有的F选择器，无论是子元素还是子孙元素 */
        /* ul li{
            color:green;
        } */
        
        /* 8.子元素选择器（E>F）：选择E元素的直接子元素F */
        /* .u1 > li > a{
            color:red;
        } */

        /* 9.相邻兄弟选择器（E+F）：具有相同父元素，选择E后面紧挨着的F元素 */
        /* .u1+li{
            color:blue;
        } */

        /* 
            10.通用兄弟选择器（E~F）, CSS3新增加一种选择器：具有相同父元素，选择E后面所有的F元素
        */
        .u1~li{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>基本选择器</h1>
    <span class="s s1">用户名已存在</span><br/>
    <span class="s s2">当前手机号被占用</span><br/>
    <div id="d1"></div>
    <div id="d2"></div>

    <ul class="u1">
        <li><a>水果</a>
            <ul class="u2">
                <li><a>苹果</a></li>
                <li><a>香蕉</a></li>
                <li><a>梨子</a></li>
            </ul>
        </li>
        <li>蔬菜</li>
        <li>肉类</li>
    </ul>
    <li>11111111111111</li>
    <li>222222222222222</li>
    <li>33333333333333</li>
    <li>44444444444444</li>
</body>
</html>